window.onload = function(){
	waterfall('main','box');
}

function waterfall(parent,box){
	//将main下的所有class=box的元素取出来
	var oParent = document.getElementById(parent);
	var oBoxs = getByClass(oParent,box);
	//console.log(oBoxs.length);
	//计算整个页面显示的列数（页面宽度/box的宽）
	var oBoxWidth = oBoxs[0].offsetWidth;
	//console.log(oBoxWidth);  在这里是257= 图片宽度220+内边距10*2+边框宽度1*2+15
	var cols = Math.floor(document.documentElement.clientWidth/oBoxWidth);
	//设置main的宽度,设置对齐方式居中
	oParent.style.cssText = 'width:'+oBoxWidth*cols+'px;margin:0 auto';
	var hArr = new Array();//存放每一列高度的数组
	for(var i=0;i<oBoxs.length;i++){
		if(i<cols){
			hArr.push(oBoxs[i].offsetHeight);
		}else{
			var minH = Math.min.apply(null,hArr);
			var index = getMinhIndex(hArr,minH);
			console.log(index);
			oBoxs[i].style.position = 'absolute';
			oBoxs[i].style.top = minH+'px';
			//oBoxs[i].style.left = oBoxWidth*index+'px';
			oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
			hArr[index] += oBoxs[i].offsetHeight;
		}
	}
	console.log(minH)
}

//根据class获取元素
function getByClass(parent,clsName){
	var boxArray = new Array(); //用来存储获取到的所有class为box的元素
	oElements = parent.getElementsByTagName('*');
	for(var i=0;i<oElements.length;i++){
		if(oElements[i].className==clsName){
			boxArray.push(oElements[i]);
		}
	}
	return boxArray;
}

function getMinhIndex(arr,val){
	for(var i in arr){
		if(arr[i]==val){
			return i;
		}
	}
}






























